<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">

			<table id="teachertable" lay-filter="type_hash" lay-even lay-skin="nob"></table>
		</div>
	</div>
</div>
<script type="text/html" id="barteachertable">

	<a class="layui-btn" lay-event="look">主页</a>
	<a class="layui-btn" lay-event="edit">编辑</a>
	<a class="layui-btn" lay-event="del">删除	</a>
<!-- 	<a class="layui-btn" lay-event="modstatus">	
	{{#  if(d.shelves === 1){ }}
	下架
	{{#  }else { }} 
	上架
	{{#  } }}</a> -->
	<!--shelves 课程状态（1上架2预定上架3下架4审核中） -->
</script>

<script type="text/html" id="teachertoolbar">
	<div class="toobarbox">
	<div class="layui-btn-container" >
    <button class="layui-btn " lay-event="addbtn">发布视频</button>
   <!-- <button class="layui-btn layui-btn-primary" lay-event="delallbtn">删除选中</button> -->
  </div>
		<div class="layui-inline">
			<input type="text" class="layui-input" id="dataxx" placeholder="选择日期">
		</div>
		<div class="layui-inline">
			<select name="shelves" lay-filter="shelvesfilter" id="tbtypeid">
				<option value=" ">全部</option>
				<option value="1">上架</option>
					<option value="3">下架</option>
						<option value="4">审核中</option>
			</select>
		</div>
		<div class="iconfont iconsousuo tablesearch">
			<input type="text" class="layui-input " id="tablesearchid" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
		</div>
		
		
			</div>
</script>


<script type="text/html" id="headimgTp">
	<!-- 这里的 checked 的状态只是演示 -->
 <img src="{{ IMG_URL + d.image }}"  style="height: 100%;"  alt="视频头像"  >
</script>


<script type="text/html" id="shelvesTp">
	<div class="" id="statusid">
		

	{{#  if(d.shelves === 1){ }}
	<span class="iconfont icondian" style="color:#78d97f ;">已上架</span>
	{{#  }else if(d.shelves === 3){ }} 
	 		<span class="iconfont icondian" style="color:#7b7b7b ;">已下架</span>
	{{#  }else if(d.shelves === 2){ }} 
	<font color="">预上架</font>		
		
	{{#  }else if(d.shelves === 4){ }}
	
<font color="#fec35d">审核中</font>		
	{{#  } }} 
		</div>
</script>

<script type="text/html" id="StatusTp">
	<!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="status"   value="{{d.id}}" lay-text="上架|下架"  lay-skin="switch"  lay-filter="lockDemo" {{ d.shelves == 1 ? 'checked' : '' }}>
</script>

<script>
	var xxjson = {
		search: '',
		startTime: '',
		stopTime: '',
		shelves: ''
	}
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'laydate'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			laydate = layui.laydate;
		var tablesearchidval;
		//第一个实例
		var typetable = table.render({
			size: 'lg',
			where: xxjson,
			id: 'teachertableid',
			contentType: 'application/json',
			pageSize: 20,
			elem: '#teachertable',
			toolbar: '#teachertoolbar',
				height: 'full-100',
			url: HH_URL + VideoGet, //数据接口
			page: true, //开启分页
			even: true,
			skin: 'nob',
			cellMinWidth: 100,
			cols: [
				[ //表头
					{
						type: 'numbers',
						// fixed: 'left',
						title: '序号',
						width: 50
					},
				
					{
						field: 'id',
						title: 'ID',
						hide: true
					}, {
						field: 'tbHeadPortrait',
						title: '封面',
						templet: '#headimgTp',
						event: 'lookheadimg',
						width: 150
					}, {
						field: 'title',
						title: '标题',
						width: 0,
						style: 'text-align:left',
						sort: true
					}, 
					// {
					// 	field: 'shelves',
					// 	title: '状态',
					// 	templet: '#shelvesTp',
					// 	event: 'lookshelves',
					// 	width: 100
					// },
					// {
					// 	field: 'shelves',
					// 	title: '状态',
					// 	width: 100
					// },
					// {
					// 	field: 'bq',
					// 	title: '类型',
					// 	templet: function(d) {
					// 		try {
					// 			var produstsTypes = ''
					// 			if (d.produstsTypes.length > 0) {
					// 				$.each(d.produstsTypes, function(idx, obj) {
					// 					if (idx > 0) {
					// 						produstsTypes += ' / '
					// 					}
					// 					produstsTypes += obj.tbProdustsTypeName;
					// 				})
					// 				return produstsTypes;
					// 			} else {
					// 				return '无'
					// 			}
					// 		} catch (e) {
					// 			return '无'
					// 			//TODO handle the exception
					// 		}
					// 	},
					// },
					{
						field: 'createTime1',
						title: '发布时间',
						width: 200,
						templet: function(d) {
							try {
								console.log(d.createTime.length)
								if (d.createTime.length > 10) {
									return d.createTime.substring(0, 10);
								} else {
									return '无'
								}
							} catch (e) {
								return '无'
							}
						}
					}, {
						field: 'vistnum',
						title: '浏览数量',
						width: 100
					},	{
						type: 'status',
						title: '状态',
						width: 100,
						templet: '#StatusTp',
						unresize: true
					},  {
						title: '操作',
						fixed: 'right',
						width: 200,
						toolbar: '#barteachertable'
					}
				]
			],

			done: function(res, curr, cont) {
				// console.log(res)
			
			laydate.render({
				elem: '#dataxx', //指定元素
				range: true,
				done: function(value, date, endDate) {
					if (date.year == undefined) {
						xxjson.startTime = '';
						xxjson.stopTime = '';
					} else {
						xxjson.startTime = date.year + '-' + date.month + '-' + date.date;
						xxjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date;
					}
					typetable.reload({
						where: xxjson,
						page: {
							curr: 1 //重新从第 1 页开始
						}
					});
					cshfn()
				}
			});
			
			form.on('select(shelvesfilter)', function(data) {
				xxjson.shelves = data.value
				typetable.reload({
					where: xxjson,
					page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				cshfn()
			});
			
			
			
		$('#tablesearchid').keydown(function(event) {
			if (event.keyCode == 13) {
				tablesearchidval = $('#tablesearchid').val();
				xxjson.search = tablesearchidval;
				typetable.reload({
					where: xxjson,
					page: {
						curr: 1 //重新从第 1 页开始
					}
				});
				cshfn()
			}
		})
			}
		});
		
		function cshfn() {
			$("#tbtypeid").val(xxjson.shelves)
			$('#tablesearchid').val(tablesearchidval);
			if (xxjson.startTime == null || xxjson.startTime == '') {
				$('#dataxx').val('');
			} else {
				$('#dataxx').val(xxjson.startTime + ' - ' + xxjson.stopTime);
			}
		
			// $('#dataxx').val(xxjson.startTime + ' - ' + xxjson.stopTime)
		}

	form.on('switch(lockDemo)', function(obj) {
			// 监听状态替换
			if (obj.elem.checked) {
				var checknum = 1
			} else {
				var checknum = 0
			}
		POSTAJAX(VideoModState, {
			tbId: obj.elem.value,
			tbType:checknum,
			type:4
		}, function(res) {
		
			layer.msg(res.msg);
			if (res.status == 200) {
		
			}
		});
})
		//监听事件
		table.on('toolbar(type_hash)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'delallbtn':
					//批量删除行数
					// console.log(checkStatus.data);
					var tbarray = [];
					$.each(checkStatus.data, function(idx, obj) {
						tbarray.push(obj.tbId);
					})

					layer.confirm('确认删除所选中的视频吗11?', function(index) {
						// POSTAJAX(LecturerDel, {
						// 	tbId:
						// 	ids: tbarray
						// }, function(res) {
						// 	layer.close(index);
						// 	layer.msg(res.msg);
						// 	if (res.status == 200) {
						// 		typetable.reload('teachertable');
						// 	}
						// })
						//向服务端发送删除指令
					});

					break;
				case 'addbtn':
					location.href = '#/video/upvideo'
					break;
				default:

					break;
			}
		});



		//监听工具条
		table.on('tool(type_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'look':
					location.href = '#/video/homepage?tbId=' + obj.data.id
					// layer.msg(JSON.stringify(obj.data));
					break;
				case 'del':
					delfn({
						ids: [obj.data.id]

					}, obj);

					break;
				case 'edit':
					// this.$router.replace({
					// 	         path: "/upvideo",
					// 	         query: {
					// 	           jumpfrom: "customerManage"
					// 	         }
					// 	       });
					location.href = '#/video/upvideo?tbId=' + obj.data.id
					break;
				case 'lookheadimg':
					layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						// offset: 't ',
						area: 'auto',
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: ' <img class="videoimgopen" src="' + IMG_URL + obj.data.image + '"  alt="视频头像"  >'
					});
					// layer.msg("图图图")
					break;

				case 'modstatus':
					// console.log(obj.data.shelves)
					// var tstatus = obj.data.shelves // 课程状态（1上架2预定上架3下架4审核中）
					// if (tstatus == 1) {
					// 	tstatus = '下架'
					// } else {
					// 	tstatus = '上架'
					// }
					// layer.confirm('确认删除该视频吗?', function(index) {

					// obj.update({
					// 	// shelvestp:'222',
					// 	shelves:tstatus
					// });
					// console.log(obj)
						// POSTAJAX(VideoModState, {
						// 	tbId: obj.data.id,
						// 	tbType:tstatus,
						// 	type:4
						// }, function(res) {

						// 	layer.msg(res.msg);
						// 	if (res.status == 200) {

						// 	}

						// })

					// 	//向服务端发送删除指令
					// });
					break;
				default:
					break;
			}
		});

		function delfn(tdata, obj) {
			layer.confirm('确认删除该视频吗?', function(index) {
				POSTAJAX(VideoDel, tdata, function(res) {
					layer.close(index);
					layer.msg(res.msg);
					if (res.status == 200) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

					}

				})

				//向服务端发送删除指令
			});
		}



	});
</script>

<style scoped>

</style>
